import React, { Component } from 'react'
import './TodoMain.css';
import store from '../../redux/store';
import { todoRemoveAction } from '../../redux/actions/todoActions';
export default class TodoMain extends Component {
    render() {
        return (
            <ul className="todo-main">
                {
                    store.getState().todo.map(item => {
                        return <li key={item.id}>
                                    <label>
                                        <input type="checkbox" checked={item.done} onChange={this.handleChange(item.id)} />
                                        <span>{item.title}</span>
                                    </label>
                                    <button
                                        className="btn btn-danger"
                                        style={{display: item.done ? 'block' : 'none'}}
                                        onClick={this.handleClick(item.id)}
                                        tid={item.id}
                                    >
                                        删除
                                    </button>
                                </li>
                    })
                }

                {/* 条件渲染, 控制空元素的显示 */}
                {
                    store.getState().todo.length === 0 && <li className="empty">暂无数据</li>
                }
                
            </ul>
        )
    }

    handleChange = (id) => {
        return (e) => {
            this.props.checkTodo(id, e.target.checked);
        }
    }
 
    //删除某个元素  parseInt('123abc');   123
    handleClick = (id) => {
        return e => {
            // this.props.removeTodo(id);
            store.dispatch(todoRemoveAction(id));
        }
    }
}
